<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <!--展示数据-->
    <link rel="stylesheet" href="/css/index.css">
    <!--从后端获取数据-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
        }
    </style>
</head>
<body>
<!--根标签一定要存在，和Vue对象进行绑定-->
<div id="app">
    <el-button type="primary" @click="refresh">刷新</el-button>
    <el-container>
        <el-aside width="200px">
            <!--左侧树形菜单-->
            <el-tree :data="data"
                     :props="defaultProps"
                     default-expand-all
                     @node-click="handleNodeClick">
            </el-tree>
        </el-aside>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜单名称">
                    <el-input v-model="form.label"></el-input>
                </el-form-item>
                <el-form-item label="父节点">
                    <!--设置一个有隐藏的父ID，用于传参-->
                    <input type="hidden" name="form.parentId">
                    <el-input v-model="form.parentName" @focus="dialogMenuTreeVisible=true"></el-input>
                </el-form-item>
                <el-form-item label="请求地址">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{btnName}}</el-button>
                    <el-button type="danger" v-if="isShow" @click="onDel">删除</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>

    <el-dialog title="权限树" :visible.sync="dialogMenuTreeVisible">
        <el-tree :data="data"
                 :props="defaultProps"
                 show-checkbox
                 check-strictly="true"
                 ref="parentMenuTree"
                 default-expand-all
        ></el-tree>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="checkSelectNode">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    let vue = new Vue({
        el: "#app",
        data: function () {
            return {
                form: {},//form表单对象
                data: [], //tree数据
                defaultProps: {//传参属性
                    children: 'children',
                    label: 'label'
                },
                btnName: '添加',//按钮名称
                isShow: false,//默认不显示删除
                dialogMenuTreeVisible: false,//弹出层，默认不显示
            }
        },

        created: function () { //初始化方法 类似于jquery  $({})
            //让_this等于当前vue对象
            var _this = this;
            //初始化查询左侧树
            axios.get('/menu/queryTreeNodeData')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //直接使用this 会指 axios对象  错误
                    // this.tableData
                    //判断返回值是否正确
                    if (response.data.code == 200) {
                        _this.data = response.data.data;
                    }
                })
        },

        methods: { //定义所有元素绑定的方法
            handleNodeClick(data) {
                // console.log(JSON.stringify(data));
                // alert(JSON.stringify(data));
                //把当前节点json数据赋值给form
                this.form = data;
                this.btnName = "修改";
                this.isShow = true;
            },
        },

    })


</script>
</html>